<template>
  <div v-if="visible" class="repair-view-root">
    <el-card>
      <template #header>
        <div style="display: flex">
          <div style="flex: 1">
            {{ state.equipData.equipName }}
          </div>
          <el-button text type="primary" @click="toReportRepair">
            保存
          </el-button>
        </div>
      </template>
      <el-form label-width="120px" :model="state.repairForm">
        <el-form-item label="维修原因">
          <el-select
            v-model="state.repairForm.reason"
            placeholder="选择维修原因"
            style="width: 100%"
            @change="reasonChange"
          >
            <el-option
              v-for="repairItem in state.repairReasonList"
              :key="repairItem.pkRepairReason"
              :label="repairItem.reasonName"
              :value="repairItem.reasonCode"
            >
              <div style="display: flex">
                <div style="flex: 1">{{ repairItem.reasonName }}</div>
                <div style="width: 12px"></div>
                <div>{{ repairItem.partName }}</div>
              </div>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="">
          <div>
            <div
              style="
                display: flex;
                font-size: 14px;
                font-weight: 800;
                color: #333;
              "
            >
              <div
                style="
                  width: 100px;
                  font-size: 12px;
                  font-weight: 400;
                  color: #666;
                "
              >
                {{ state.repairItem?.reasonCode || '' }}
              </div>
              {{ state.repairItem?.reasonName || '' }}
            </div>
            <div
              style="
                display: flex;
                font-size: 14px;
                font-weight: 800;
                color: #333;
              "
            >
              <div
                style="
                  width: 100px;
                  font-size: 12px;
                  font-weight: 400;
                  color: #666;
                "
              >
                {{ state.repairItem?.partCode || '' }}
              </div>
              {{ state.repairItem?.partName || '' }}
            </div>
          </div>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="state.repairForm.remark" placeholder="备注" />
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script setup>
  import { getRepairReasonApi, reportRepairApi } from '@/api/equip/equip_api.ts'
  import { localStorageConfig } from '@/config/localstorage.config'
  const pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)
  const $baseMessage = inject('$baseMessage'),
    $baseLoading = inject('$baseLoading')
  const visible = ref(false)
  const state = reactive({
    repairReasonList: [],
    equipData: null,
    dispatchData: null,
    repairForm: {},
    repairItem: null,
  })

  const toReportRepair = async () => {
    const params = {
      pkRepairReason: state.repairItem.pkRepairReason,
      pkEqlist: state.equipData.pkEqlist,
      pkRepairpart: state.repairItem.pkRepairPart,
      remark: state.repairForm.remark || '',
      equipstate: state.equipData.state,
    }
    const load = $baseLoading()
    try {
      const res = await reportRepairApi(params)
      $baseMessage(res.msg || '操作成功！', 'success')
      load.close()
      console.log('toReportRepair', res)
    } catch (error) {
      load.close()
    }
  }

  const reasonChange = (val) => {
    const rItem = state.repairReasonList.find((item) => item.reasonCode === val)
    state.repairItem = rItem
  }
  const getRepairReason = async () => {
    const {
      data: { list: repairReasonList = [] },
    } = await getRepairReasonApi({
      pkCorp,
      pageNum: 1,
      pageSize: 1000,
      total: 0,
    })
    state.repairReasonList = repairReasonList
    console.log('getRepairReason', state.repairReasonList)
  }

  const toShow = (dispatchData, equipData) => {
    visible.value = true
    state.equipData = equipData
    state.dispatchData = dispatchData
    getRepairReason()
  }
  const toHide = () => {
    visible.value = false
    state.equipData = null
    state.dispatchData = null
  }
  defineExpose({
    toShow,
    toHide,
  })
</script>
<style lang="scss" scoped>
  .repair-view-root {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    :deep(.el-form-item) {
      margin-bottom: 2px;
    }
  }
</style>
